﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckOut.aspx.cs" Inherits="OnlineCellphoneStore.UserPages.CheckOut" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Check Out</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

    <!-- My CSS -->
    <link href="../Design/colors.css" rel="stylesheet" type="text/css" />
    <link href="../Design/fonts.css" rel="stylesheet" type="text/css" />
    <link href="../Design/style.css" rel="stylesheet" type="text/css" />

    <!-- Latest compiled and minified jQuery -->
    <script src="../JavaScript/jquery-2.1.1.min.js"></script>

    <!-- Bootstrap -->
    <link href="../Bootstrap3.11/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../Bootstrap3.11/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <script src="../Bootstrap3.11/js/bootstrap.min.js"></script>

    <!-- Holder -->
    <script src="../Holder/holder.js"></script>

    <script src="../JavaScript/Convert.js"></script>
</head>
<body class="background-color-lightblue" style="font-family: 'Century Gothic';">
    <form id="form1" runat="server">
        <div class="container background-color-white">
            <div id="shortcuts" class="row background-color-azure">
                <ul id="registerdUserOptions" class="nav navbar-nav navbar-right" runat="server">
                    <li class="black"><a id="aHelloUser" runat="server"><span class="glyphicon glyphicon-user"></span>
                        Hello </a></li>
                    <li class="black"><a id="aLastEntered" runat="server"><span class="glyphicon glyphicon-time"></span>
                        Last Entered: </a></li>
                    <li class="black" style="text-decoration: underline;"><a href="#" runat="server" onserverclick=" LogOut_Click"><span class="glyphicon glyphicon-off"></span>
                        Log out</a></li>
                </ul>
                <ol class="breadcrumb" style="background-color: white; margin-top: 8px;">
                    <li><a href="../Main.aspx"><i class="icon-home"></i>
                        Home </a><span class="divider"></span></li>
                    <li><a href="../SitePages/About.aspx"><i class="icon-user"></i>
                        About </a><span class="divider"></span></li>
                    <li><a href="../SitePages/Contact.aspx"><i class="icon-envelope"></i>
                        Contact </a><span class="divider"></span></li>
                </ol>
            </div>
            <div id="header" class="row-fluid background-color-mylightblue shadow border">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="../Images/banner1.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Best Prices</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner2.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Newest Phones</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner3.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Full Warranty</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner4.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Best Deals</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="../Images/banner5.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Store</h2>
                                <p>Fast Delivery</p>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('.carousel').carousel({
                            interval: 4000
                        });
                    </script>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
            <div id="menu" class="row-fluid">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">Online Store </a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li><a href="../Search.aspx"><span class="glyphicon glyphicon-list"></span>
                                    All Products</a></li>
                                <li><a href="../UserPages/ShopingCart.aspx"><span class="glyphicon glyphicon-shopping-cart"></span>
                                    My Shoping Cart </a></li>
                                <li><a id="RecentPurchasesLink" href="../UserPages/PreviousPurchase.aspx"><span class="glyphicon glyphicon-th-large"></span><span> 
                                    My Previous Purchase</span></a></li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>
            </div>
            <div id="content" class="row-fluid form-inline">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-pencil"></span>
                        Check Out Your Order
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-footer">
                            <div class="panel-body text-center">
                                <h3>Choose Shiping Date:</h3>
                                <div style="margin-left: 40%">
                                    <asp:Calendar ID="Calendar" OnSelectionChanged="Calendar_SelectionChanged" runat="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px" Width="220px">
                                        <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
                                        <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
                                        <OtherMonthDayStyle ForeColor="#999999" />
                                        <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                                        <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
                                        <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
                                        <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
                                        <WeekendDayStyle BackColor="#CCCCFF" />
                                    </asp:Calendar>
                                </div>
                                <h3>Choose the wanted Currency for Purchasing:</h3>
                                <table class="text-center table table-borderd">
                                    <tr>
                                        <td>
                                            <h4>Convert this amount:</h4>
                                        </td>
                                        <td>
                                            <h4>From this currency:</h4>
                                        </td>
                                        <td>
                                            <h4>To this currency: </h4>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h4 id="amount">10</h4>
                                        </td>
                                        <td>
                                            <select class="form-control" id="selectFrom">
                                                <option value="nis" selected="selected">Shekels - NIS</option>
                                                <option value="usd">Dollars - USD</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-control" id="selectTo">
                                                <option value="nis">Shekels - NIS</option>
                                                <option value="usd" selected="selected">Dollars - USD</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button class="btn btn-default" id="convertBtn" type="button">
                                                <span class="glyphicon glyphicon-refresh"></span>
                                                Convert</button>
                                        </td>
                                    </tr>
                                </table>
                                <asp:Button ID="PayBtn" CssClass="btn btn-primary btn-lg" runat="server" Text="Confirm & Pay" OnClick="PayBtn_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer" class="text-center center-block background-color-lightblue border-color">
            <br />
            <br />
            <br />
            <div class="row">
                <p>This site designed and build as an assingment for the course "Web Development Environments", 2014, BGU</p>
                <p>Copyright &copy; Dan Ziv & Daniel Shefer | <a href="http://www.w3schools.com/html/html5_intro.asp" style="color: white;">HTML5</a> | <a href="http://www.w3schools.com/css/css3_intro.asp" style="color: white;">CSS3</a> | <a href="http://getbootstrap.com/" style="color: white;">Bootstrap 3.11</a></p>
            </div>
            <br />
        </div>
    </form>
</body>
</html>
